<template>
  <div class="right-pane">
    <a-tabs hideAdd v-model="activeTabName" type="editable-card" @edit="onEdit" tabBarGutter="0">
      <a-tab-pane v-for="item in tabList" :tab="item.label" :key="item.name" :closable="item.closable">
        <component :is="item.component"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    data() {
      return {
        mode: 'top',
      };
    },
    computed: {
      activeTabName: {
          get() {
              return this.$store.state.navTabs.activeTabName;
          },
          set(value) {
              this.$store.commit("navTabs/setActiveTabName", value);
          }
      },
      ...mapState('navTabs',[
          'tabList'
      ])
    },
    methods: {
      ...mapMutations('navTabs',[
          'closeTab'
      ]),
      onEdit(targetKey, action) {
        console.log(action)
        this[action](targetKey);
      },
      remove(targetKey) {
        this.closeTab(targetKey)
      },
    },
  };
</script>
<style scoped>
.right-pane {
  padding-left:1px;
}

.tabs {
    height: 99%;
}
</style>
